<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 1.使用transition内置组件包裹需要执行动画的元素,并通过name属性指定过渡动画类名为：why -->
    <transition name="fade">
      <h4
        v-if="isShow"
        style="border: 1px solid #ddd; width: 100px; font-size: 30px"
      >
        Hello World
      </h4>
    </transition>
    <hr />
    <h4>CSS 动画</h4>
    <transition name="bounce">
      // 盒子
      <div class="box" v-show="isShow">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius excepturi
        similique sequi ratione natus quasi perferendis vero consectetur
        voluptas tempore nihil ducimus impedit ipsam, vel totam aliquid
        reiciendis cum. Corporis sunt consequatur in non similique vel sapiente
        quaerat a, quos aperiam nemo molestiae error id nisi, et eaque maiores
        sint. Inventore similique ipsum quasi quis aut, voluptatem assumenda
        dolore maxime quisquam dolorum rerum consequatur ad. Autem voluptatem
        sint velit. Dignissimos iste asperiores expedita corrupti nisi, quo
        tenetur, ullam incidunt minima vel, commodi error illum in. Molestiae
        illo voluptatibus labore architecto, autem minus odit perspiciatis
        expedita similique iste, perferendis placeat eos!
      </div>
    </transition>
    <hr />
    <h3>第三方库animate.css</h3>
    <transition
      appear
      :duration="{ enter: 300, leave: 200 }"
      enter-active-class="animate__animated animate__swing"
      leave-active-class="animate__animated animate__backOutLeft"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
    >
      <div class="box2" v-show="isShow"></div>
    </transition>
    <hr />
    <h2>列表过渡</h2>
    <div id="list-demo" class="demo">
      <button v-on:click="add">Add</button>
      <button v-on:click="remove">Remove</button>
      <transition-group name="list" tag="p">
        <span v-for="item in items" v-bind:key="item" class="list-item">
          {{ item }}
        </span>
      </transition-group>
      <input type="text" v-model.number="num" />
      <p>{{ animatedNum }}</p>
    </div>
  </div>
</template>

<script>
import 'animate.css'
import gsap from 'gsap'
export default {
  name: 'page-day37',
  data() {
    return {
      isShow: true,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
      num: '',
      agentNum: 0
    }
  },
  computed: {
    animatedNum() {
      return this.agentNum
    }
  },
  watch: {
    num(newVal) {
      gsap.to(this.$data, { duration: 0.5, agentNum: newVal })
      console.log('this.$data: ', this.$data)
    }
  },

  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length)
    },
    add() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove() {
      this.items.splice(this.randomIndex(), 1)
    },
    beforeEnter(el) {
      //动画/过渡准备进入前触发
      console.log('动画/过渡准备进入前触发beforeEnter:', el)
    },
    enter(el) {
      //元素进入 enter-active触发
      console.log('enter-active触发', el)

      // done() //执行done的时候entert-active过渡结束
    },
    afterEnter(el) {
      //进入过渡/动画结束后
      console.log('过渡/动画结束后afterEnter', el)
    },
    enterCancelled(el) {
      console.log('cancel', el)
    }
  }
}
</script>

// 2.实现h4元素的过渡动画
<style scoped>
/* h4元素进入之前和离开之后应用的样式 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/* h4元素进入到和开始离开应用的样式 */
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
/* h4元素在整个进入/离开过渡的阶段中应用的样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}
.box {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  overflow: hidden;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.bounce-enter-active {
  animation: bounce 0.5s;
}
.bounce-leave-active {
  animation: bounce 0.5s reverse;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 50px auto;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>
